<template>
	<div class="container" style="top:50px;">
		<leftSteps @stepChanged="onStepChange" />
		<div class="right-container" style="left:208px;" ref="container">
			<div class="right-container-stage">
				<a-affix @change="onAffixChange" :target="() => this.$refs.container"></a-affix>
				<div class="sub-app" v-show="current==0?true:false">
					<div class="page-stage-header" :class="affixClass">
						<a-page-header title="开案表" sub-title="个案服务开案" >
							<template slot="tags">
								<a-tag color="blue">
									进行中
								</a-tag>
							</template>
							<template slot="extra">
								<a-button class="fl" :size="affixClass?'small':''">相关审核记录</a-button>
								<a-button class="inline" :size="affixClass?'small':''">保存/更新</a-button>
								<a-button class="inline" :size="affixClass?'small':''">打印</a-button>
								<a-button class="inline" :size="affixClass?'small':''">返回</a-button>
							</template>
							<a-descriptions size="small" :column="3" >
								<a-descriptions-item label="服务对象">
									张三
								</a-descriptions-item>
								<a-descriptions-item label="联系电话">
									13000000000
								</a-descriptions-item>
								<a-descriptions-item label="服务档案编号">
									ADBCDAFDCDFS001LDJFA
								</a-descriptions-item>
								<a-descriptions-item label="所属项目">
									阿里困境儿童帮扶计划
								</a-descriptions-item>
								<a-descriptions-item label="工作员">
									社工姓名
								</a-descriptions-item>
								<a-descriptions-item label="开案时间">
									2020年10月1日 13:30分
								</a-descriptions-item>
								<a-descriptions-item label="审核督导">
									督导姓名(如果未审核过则不显示本部分)
								</a-descriptions-item>
							</a-descriptions>
						</a-page-header>
					</div>
					<div class="page-body" style="margin-top:16px;">
						<a-row :gutter="16">
							<a-col :xs="18" :sm="18" :md="18" lg="18" :span="16">
								<a-row>
									<a-col>
										<a-card title="求助渠道">
											<a-form-model ref="ruleForm" layout="vertical" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
												<a-radio-group v-model="form.resource">
													<a-radio value="1">
														本人求助
													</a-radio>
													<a-radio value="2">
														根据探访名单
													</a-radio>
													<a-radio value="3">
														外展
													</a-radio>
													<a-radio value="4">
														他人转介
													</a-radio>
													<a-radio value="5">
														机构/部门转介
													</a-radio>
													<a-radio value="6">
														其他
													</a-radio>
												</a-radio-group>
												<div class="special-box" v-show="form.resource==4||form.resource==5||form.resource==6">
													<a-form-model-item v-show="form.resource==4||form.resource==5" ref="name" label="转介者姓名">
														<a-input class="w-600" v-model="form.name" />
													</a-form-model-item>
													<a-form-model-item v-show="form.resource==4||form.resource==5" label="与服务对象关系">
														<a-input class="w-600" />
													</a-form-model-item>
													<a-form-model-item v-show="form.resource==4||form.resource==5" label="转介者性别">
														<a-radio-group v-model="form.sex">
															<a-radio value="1">
																男
															</a-radio>
															<a-radio value="2">
																女
															</a-radio>
														</a-radio-group>
													</a-form-model-item>
													<a-form-model-item v-show="form.resource==4||form.resource==5" label="转介者联系电话">
														<a-input />
													</a-form-model-item>
													<a-form-model-item v-show="form.resource==4||form.resource==5" label="转介者住址">
														<a-input />
														<a-input v-model="form.address" type="textarea" placeholder="详细地址" />
													</a-form-model-item>
													<a-form-model-item v-show="form.resource==6" label="其他">
														<a-input v-model="form.desc" type="textarea" placeholder="详细地址" />
													</a-form-model-item>
												</div>
											</a-form-model>
										</a-card>
										<a-card title="服务对象面临的问题">
											<a-form-model ref="ruleForm" layout="vertical" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
												<a-form-item label="问题性质">
													<a-select mode="tags" style="width: 100%" :token-separators="[',']">
														<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
															选项{{ i }}
														</a-select-option>
													</a-select>
												</a-form-item>
												<a-form-model-item label="服务对象情况">
													<a-input v-model="form.desc1" type="textarea" placeholder="建议100字" />
												</a-form-model-item>
												<a-form-model-item label="提出面临的问题">
													<a-input v-model="form.desc2" type="textarea" placeholder="建议100字" />
												</a-form-model-item>
												<a-form-model-item label="期望获得的协助">
													<a-input v-model="form.desc3" type="textarea" placeholder="建议100字" />
												</a-form-model-item>
											</a-form-model>
										</a-card>
										<a-card title="初步评估">
											<a-form-model ref="ruleForm" layout="vertical" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
												<a-form-model-item label="尝试过的应付方法">
													<a-input class="w-600" v-model="form.desc4" type="textarea" placeholder="建议100字" />
												</a-form-model-item>
												<a-form-model-item label="危机程度">
													<a-radio-group v-model="form.weiji">
														<a-radio value="1">
															低
														</a-radio>
														<a-radio value="2">
															中
														</a-radio>
														<a-radio value="2">
															高
														</a-radio>
													</a-radio-group>
												</a-form-model-item>
												<a-form-model-item label="服务对象是否愿意接受服务">
													<a-switch v-model="form.delivery" />
												</a-form-model-item>
												<a-form-model-item label="未完成原因" v-show="!form.delivery" >
													<a-input v-model="form.desc4" type="textarea" placeholder="未完成原因" />
												</a-form-model-item>
												<div v-show="form.delivery" class="special-box">
													<a-form-model-item label="接受服务同意书" help="如已填写接受服务同意书，扫描并上传">
														<a-upload
																action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
																list-type="picture"
																:default-file-list="fileList"
														>
															<a-button> <a-icon type="upload" /> 点击上传 </a-button>
														</a-upload>
													</a-form-model-item>
												</div>
											</a-form-model>
										</a-card>
									</a-col>
								</a-row>
							</a-col>
							<a-col :xs="6" :sm="6" :md="6" lg="6">
								<a-card title="过程记录">
									<div slot="extra">
										<a-button size="small" @click="creat" type="default">新建</a-button>
									</div>
									<a-list item-layout="vertical" size="small">
										<a-list-item @click="creat">
											过程记录20201001
										</a-list-item>
										<a-list-item @click="creat">
											过程记录20201001
										</a-list-item>
										<a-list-item @click="creat">
											过程记录20201001
										</a-list-item>
										<div slot="footer">
											<a-pagination size="small" :total="50" style="float: right;" />
										</div>
									</a-list>
								</a-card>
								<untilsBox></untilsBox>
							</a-col>
						</a-row>
					</div>
				</div>
				<div class="sub-app" v-show="current==1?true:false">
					<div class="page-stage-header" :class="affixClass">
						<a-page-header title="评估表" sub-title="个案服务评估" >
							<template slot="tags">
								<a-tag color="blue">
									进行中
								</a-tag>
							</template>
							<template slot="extra">
								<a-button class="fl" :size="affixClass?'small':''">相关审核记录</a-button>
								<a-button class="inline" :size="affixClass?'small':''">保存/更新</a-button>
								<a-button class="inline" :size="affixClass?'small':''">打印</a-button>
								<a-button class="inline" :size="affixClass?'small':''">返回</a-button>
							</template>
							<a-descriptions size="small" :column="3" >
								<a-descriptions-item label="服务对象">
									张三
								</a-descriptions-item>
								<a-descriptions-item label="联系电话">
									13000000000
								</a-descriptions-item>
								<a-descriptions-item label="服务档案编号">
									ADBCDAFDCDFS001LDJFA
								</a-descriptions-item>
								<a-descriptions-item label="所属项目">
									阿里困境儿童帮扶计划
								</a-descriptions-item>
								<a-descriptions-item label="工作员">
									社工姓名
								</a-descriptions-item>
								<a-descriptions-item label="开案时间">
									2020年10月1日 13:30分
								</a-descriptions-item>
								<a-descriptions-item label="审核督导">
									督导姓名(如果未审核过则不显示本部分)
								</a-descriptions-item>
							</a-descriptions>
						</a-page-header>
					</div>
					<div class="page-body" style="margin-top:16px;"></div>
				</div>
				<div class="sub-app" v-show="current==2?true:false">
					<div class="page-stage-header" :class="affixClass">
						<a-page-header title="分析及计划" sub-title="个案服务分析及计划" >
							<template slot="tags">
								<a-tag color="blue">
									进行中
								</a-tag>
							</template>
							<template slot="extra">
								<a-button class="fl" :size="affixClass?'small':''">相关审核记录</a-button>
								<a-button class="inline" :size="affixClass?'small':''">保存/更新</a-button>
								<a-button class="inline" :size="affixClass?'small':''">打印</a-button>
								<a-button class="inline" :size="affixClass?'small':''">返回</a-button>
							</template>
							<a-descriptions size="small" :column="3" >
								<a-descriptions-item label="服务对象">
									张三
								</a-descriptions-item>
								<a-descriptions-item label="联系电话">
									13000000000
								</a-descriptions-item>
								<a-descriptions-item label="服务档案编号">
									ADBCDAFDCDFS001LDJFA
								</a-descriptions-item>
								<a-descriptions-item label="所属项目">
									阿里困境儿童帮扶计划
								</a-descriptions-item>
								<a-descriptions-item label="工作员">
									社工姓名
								</a-descriptions-item>
								<a-descriptions-item label="开案时间">
									2020年10月1日 13:30分
								</a-descriptions-item>
								<a-descriptions-item label="审核督导">
									督导姓名(如果未审核过则不显示本部分)
								</a-descriptions-item>
							</a-descriptions>
						</a-page-header>
					</div>
					<div class="page-body" style="margin-top:16px;"></div>
				</div>
				<div class="sub-app" v-show="current==3?true:false">
					<div class="page-stage-header" :class="affixClass">
						<a-page-header title="介入" sub-title="个案服务介入记录" >
							<template slot="tags">
								<a-tag color="blue">
									进行中
								</a-tag>
							</template>
							<template slot="extra">
								<a-button class="fl" :size="affixClass?'small':''">相关审核记录</a-button>
								<a-button class="inline" :size="affixClass?'small':''">保存/更新</a-button>
								<a-button class="inline" :size="affixClass?'small':''">打印</a-button>
								<a-button class="inline" :size="affixClass?'small':''">返回</a-button>
							</template>
							<a-descriptions size="small" :column="3" >
								<a-descriptions-item label="服务对象">
									张三
								</a-descriptions-item>
								<a-descriptions-item label="联系电话">
									13000000000
								</a-descriptions-item>
								<a-descriptions-item label="服务档案编号">
									ADBCDAFDCDFS001LDJFA
								</a-descriptions-item>
								<a-descriptions-item label="所属项目">
									阿里困境儿童帮扶计划
								</a-descriptions-item>
								<a-descriptions-item label="工作员">
									社工姓名
								</a-descriptions-item>
								<a-descriptions-item label="开案时间">
									2020年10月1日 13:30分
								</a-descriptions-item>
								<a-descriptions-item label="审核督导">
									督导姓名(如果未审核过则不显示本部分)
								</a-descriptions-item>
							</a-descriptions>
						</a-page-header>
					</div>
					<div class="page-body" style="margin-top:16px;"></div>
				</div>
				<div class="sub-app" v-show="current==4?true:false">
					<div class="page-stage-header" :class="affixClass">
						<a-page-header title="阶段性评估" sub-title="个案服务阶段性评估" >
							<template slot="tags">
								<a-tag color="blue">
									进行中
								</a-tag>
							</template>
							<template slot="extra">
								<a-button class="fl" :size="affixClass?'small':''">相关审核记录</a-button>
								<a-button class="inline" :size="affixClass?'small':''">保存/更新</a-button>
								<a-button class="inline" :size="affixClass?'small':''">打印</a-button>
								<a-button class="inline" :size="affixClass?'small':''">返回</a-button>
							</template>
							<a-descriptions size="small" :column="3" >
								<a-descriptions-item label="服务对象">
									张三
								</a-descriptions-item>
								<a-descriptions-item label="联系电话">
									13000000000
								</a-descriptions-item>
								<a-descriptions-item label="服务档案编号">
									ADBCDAFDCDFS001LDJFA
								</a-descriptions-item>
								<a-descriptions-item label="所属项目">
									阿里困境儿童帮扶计划
								</a-descriptions-item>
								<a-descriptions-item label="工作员">
									社工姓名
								</a-descriptions-item>
								<a-descriptions-item label="开案时间">
									2020年10月1日 13:30分
								</a-descriptions-item>
								<a-descriptions-item label="审核督导">
									督导姓名(如果未审核过则不显示本部分)
								</a-descriptions-item>
							</a-descriptions>
						</a-page-header>
					</div>
					<div class="page-body" style="margin-top:16px;"></div>
				</div>
				<div class="sub-app" v-show="current==5?true:false">
					<div class="page-stage-header" :class="affixClass">
						<a-page-header title="结案表" sub-title="个案服务结案" >
							<template slot="tags">
								<a-tag color="blue">
									进行中
								</a-tag>
							</template>
							<template slot="extra">
								<a-button class="fl" :size="affixClass?'small':''">相关审核记录</a-button>
								<a-button class="inline" :size="affixClass?'small':''">保存/更新</a-button>
								<a-button class="inline" :size="affixClass?'small':''">打印</a-button>
								<a-button class="inline" :size="affixClass?'small':''">返回</a-button>
							</template>
							<a-descriptions size="small" :column="3" >
								<a-descriptions-item label="服务对象">
									张三
								</a-descriptions-item>
								<a-descriptions-item label="联系电话">
									13000000000
								</a-descriptions-item>
								<a-descriptions-item label="服务档案编号">
									ADBCDAFDCDFS001LDJFA
								</a-descriptions-item>
								<a-descriptions-item label="所属项目">
									阿里困境儿童帮扶计划
								</a-descriptions-item>
								<a-descriptions-item label="工作员">
									社工姓名
								</a-descriptions-item>
								<a-descriptions-item label="开案时间">
									2020年10月1日 13:30分
								</a-descriptions-item>
								<a-descriptions-item label="审核督导">
									督导姓名(如果未审核过则不显示本部分)
								</a-descriptions-item>
							</a-descriptions>
						</a-page-header>
					</div>
					<div class="page-body" style="margin-top:16px;"></div>
				</div>
				<div class="sub-app" v-show="current==6?true:false">
					<div class="page-stage-header" :class="affixClass">
						<a-page-header title="跟踪" sub-title="个案服务跟踪记录" >
							<template slot="tags">
								<a-tag color="blue">
									进行中
								</a-tag>
							</template>
							<template slot="extra">
								<a-button class="fl" :size="affixClass?'small':''">相关审核记录</a-button>
								<a-button class="inline" :size="affixClass?'small':''">保存/更新</a-button>
								<a-button class="inline" :size="affixClass?'small':''">打印</a-button>
								<a-button class="inline" :size="affixClass?'small':''">返回</a-button>
							</template>
							<a-descriptions size="small" :column="3" >
								<a-descriptions-item label="服务对象">
									张三
								</a-descriptions-item>
								<a-descriptions-item label="联系电话">
									13000000000
								</a-descriptions-item>
								<a-descriptions-item label="服务档案编号">
									ADBCDAFDCDFS001LDJFA
								</a-descriptions-item>
								<a-descriptions-item label="所属项目">
									阿里困境儿童帮扶计划
								</a-descriptions-item>
								<a-descriptions-item label="工作员">
									社工姓名
								</a-descriptions-item>
								<a-descriptions-item label="开案时间">
									2020年10月1日 13:30分
								</a-descriptions-item>
								<a-descriptions-item label="审核督导">
									督导姓名(如果未审核过则不显示本部分)
								</a-descriptions-item>
							</a-descriptions>
						</a-page-header>
					</div>
					<div class="page-body" style="margin-top:16px;"></div>
				</div>
			</div>
		</div>
		<div class="subcontrolSection" v-show="affixClass">
			<div class="subcontrolSection-inner">
				<div class="infoArea">
					<div class="info-view">
						<div class="inline info-view-period">
							<div class="info-view-list">
								<div class="info-view-item">
									<span class="info-view-name">对象名：</span>
									<span class="info-view-content">张凯悦</span>
									<div class="info-view-code-area">
										<span class="code-area inline">档案编号：ACDCDKJRAL991KDCA</span>
									</div>
								</div>
								<div class="info-view-item">
									<span class="info-view-name">联系电话：</span>
									<span class="info-view-content">13000000000</span>
									<div class="info-view-code-area">
										<span class="code-area inline">项目：阿里困境儿童帮扶计划</span>
									</div>
								</div>
							</div>
						</div>
						<!--
						<div>项目信息</div>
						<div>档案编号</div>
						<div>联系电话</div>
						-->
					</div>
				</div>
				<span class="actionArea">
					<div class="fl">
						<a-button>相关审核记录</a-button>
					</div>
					<div class="inline">
						<a-button>保存/更新</a-button>
					</div>
					<div class="inline">
						<a-button>打印</a-button>
					</div>
					<div class="inline">
						<a-button>返回</a-button>
					</div>
				</span>
			</div>
		</div>
		<a-drawer
				title="这个标题动态变换为查看或编辑的东西"
				:width="720"
				:visible="visible"
				:body-style="{ paddingBottom: '80px' }"
				@close="onClose"
		>
			<user-info></user-info>
		</a-drawer>
	</div>
</template>

<script>
	import userInfo from '../../../components/userInfo.vue'
	import untilsBox from '../../../components/untilsBox.vue'
	import leftSteps from '../../../components/create/leftSteps';
	const columns1 = [
			{
		title: '服务表格',
		dataIndex: 'name',
		align:'center',
	},
		{
			title: '提交时间',
			dataIndex: 'time',
			align:'center',
		},
		{
			title: '操作员',
			dataIndex: 'time1',
			align:'center',
		},
		{
			title: '操作',
			key: 'action',
			width:280,
			align:'center',
			scopedSlots: { customRender: 'action' },
		},
	];
	const data1 = [
			{
		name: '开案表'
	}, {
		name: '评估表'
	}, {
		name: '分析及计划表'
	}, {
		name: '阶段性评估表'
	}, {
		name: '结案表'
	}, {
		name: '转介表'
	}, ];
	const columns2 = [
			{
		title: '序号',
		dataIndex: 'name',
		align:'center',
	},
		{
			title: '日期',
			dataIndex: 'time',
			align:'center',
		},
		{
			title: '时间',
			dataIndex: 'time1',
			align:'center',
		},
		{
			title: '地点',
			dataIndex: 'time2',
			align:'center',
		},
		{
			title: '形式',
			dataIndex: 'time3',
			align:'center',
		},
		{
			title: '接触对象',
			dataIndex: 'time4',
			align:'center',
		},
		{
			title: '对象人数',
			dataIndex: 'time5',
			align:'center',
		},
		{
			title: '操作员',
			dataIndex: 'time6',
			align:'center',
		},
		{
			title: '操作',
			key: 'action',
			align:'center',
			width:280,
			scopedSlots: { customRender: 'action' },
		},
	];
	const data2 = [
			{
		name: '1'
	}, {
		name: '2'
	}, {
		name: '3'
	}];
	const columns3 = [
			{
		title: '填写表格',
		dataIndex: 'name',
		align:'center',
	},
		{
			title: '提交时间',
			dataIndex: 'time',
			align:'center',
		},
		{
			title: '操作员',
			dataIndex: 'time1',
			align:'center',
		},
		{
			title: '操作',
			key: 'action',
			align:'center',
			width:280,
			scopedSlots: { customRender: 'action' },
		},
	];
	const data3 = [
			{
		name: '接受服务同意书'
	}, {
		name: '服务对象安全计划表'
	}, {
		name: '服务对象成效自评表'
	}, {
		name: '转介同意书'
	}];
	const columns4 = [
			{
		title: '评估表 ',
		dataIndex: 'name',
		align:'center',
	},
		{
			title: '提交时间',
			dataIndex: 'time',
			align:'center',
		},
		{
			title: '操作员',
			dataIndex: 'time1',
			align:'center',
		},
		{
			title: '操作',
			key: 'action',
			width:280,
			align:'center',
			scopedSlots: { customRender: 'action' },
		},
	];
	const data4 = [{}, {}];
	const columns5 = [
			{
		title: '资料 ',
		dataIndex: 'name',
		align:'center',
	},
		{
			title: '提交时间',
			dataIndex: 'data',
			align:'center',
		},
		{
			title: '操作员',
			dataIndex: 'user',
			align:'center',
		},
		{
			title: '操作',
			key: 'action',
			width:280,
			align:'center',
			scopedSlots: { customRender: 'action' },
		},
	];
	const data5 = [
			{
		name: '服务对象重大疾病申请书',
		data: "2020-09-08",
		user: '张三'
	},
		{
			name: '服务对象赠送社工的感谢信',
			data: "2020-09-08",
			user: '张三'
		},
	];
	export default {
		components:{
			userInfo,
			untilsBox,
			leftSteps
		},
		data() {
			return {
				affixClass:'',
				step_current:0,
				current:0,
				tab: 1,
				active: 0,
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 18
				},
				form: {
					fuwu: '1',
					sex: '1',
					resource: '1',
					weiji: '1',
					pingfen: '1',
					delivery:false,
					delivery2:false,
					domains: [{
					}],
					domains2: [{
					}]
				},
				Top: false,
				rules: {},
				visible: false,
				data1,
				columns1,
				data2,
				columns2,
				data3,
				columns3,
				data4,
				columns4,
				data5,
				columns5,
				fileList:[]
			}
		},
		computed: {
		},
		methods: {
			onAffixChange(affixed){
				if(affixed){
					this.affixClass='actived';
				}else{
					this.affixClass='';
				}
			},
			onStepChange(current){
				this.current = current;
			},
			handleSubmit() {

			},
			getScroll(event) {
				console.log(event.target.scrollTop)
			},
			activeKey(key) {
				console.log(key);
			},
			creat() {
				this.visible = true;
			},
			onClose() {
				this.visible = false;
			},
			removeDomain(item) {
				let index = this.form.domains.indexOf(item);
				if (index !== -1) {
					this.form.domains.splice(index, 1);
				}
			},
			addDomain() {
				this.form.domains.push({
					value: '',
					key: Date.now(),
				});
			},
			removeDomain2(item) {
				let index = this.form.domains2.indexOf(item);
				if (index !== -1) {
					this.form.domains2.splice(index, 1);
				}
			},
			addDomain2() {
				this.form.domains2.push({
					value: '',
					key: Date.now(),
				});
			},
			success() {
				this.$message.success('提交成功，请等待审核');
			},
		}
	}
</script>

<style>

	.page-body {
		margin-bottom: 82px;
	}
	.container {
		top:50px;
	}
	.left-menu,.left-menu .left-menu-stage {
		width:224px;
	}
	.left-menu .left-menu-stage .left-menu-scene {
		left:16px;
		right:0;
	}
	.left-menu .left-menu-stage .left-menu-scene .menu-title {
		margin-left: -16px;
	}
	.left-menu .menu-list {
		top:8px;
	}
	.right-container {
		left:224px;
	}
	.special-box {
		border:1px solid #eaeaea;
		margin:12px;
		padding:16px;
		background: #fefefe;
	}
	.page-stage-header {
		background-color: #fff;
		border-bottom:1px solid #eaeaea;
		box-shadow: inset 0 -1px 0 0 #ebecec;
	}
	.page-stage-header * {
		transition: all .3s;
	}
	.serve {
		width: 1200px;
		margin: 0 auto;
		text-align: left;
		position: relative;
		padding-bottom: 40px;
	}

	.title {
		font-weight: bold;
		font-size: 24px;
	}

	.border {
		border: 1px solid #D9D9D9;
	}

	.top0 {
		position: fixed;
		top: 50px;
		left: 0;
	}

	.w-600 {
		width: 600px;
	}

	.tit {
		margin-bottom: 20px;
		color: rgba(0, 0, 0, 0.85);
		font-weight: bold;
		font-size: 14px;
		line-height: 1.5;
	}
	.change-btn{
		width: 320px;
	}
	.hand{
		line-height: 18px;
		cursor: pointer;
	}
	.tabItem{
		width: 30%;
		height: 30px;
		text-align: center;
		line-height: 30px;
		background-color: rgb(217,217,217);
	}
	.active{
		background-color: rgb(255,102,0);
		color: #FFFFFF;
	}
</style>
